<template>
	<div class="page404_container">
		<div class="wscn-http404 clearfix">
			<div class="img-404">
				<img class="img-404__parent" :src="img_404" alt="404" />
				<img class="img-404__child left-cloud" :src="img_404_cloud" alt="404" />
				<img class="img-404__child mid-cloud" :src="img_404_cloud" alt="404" />
				<img class="img-404__child right-cloud" :src="img_404_cloud" alt="404" />
			</div>
			<div class="bullshit">
				<div class="bullshit__oops">OOPS!</div>
				<div class="bullshit__info">
					版权所有
					<a class="link-type" href="xxx.com" target="_blank">xx科技</a>
				</div>
				<div class="bullshit__headline">您访问的页面好像不存在</div>
				<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
				<div class="bullshit__info">
					<span class="red-mark f18">{{ count }}</span
					>s后自动进入后台首页
				</div>
				<a href="/" class="bullshit__return-home" @click="$router.replace('/')">返回首页</a>
			</div>
		</div>
	</div>
</template>

<script>
import img_404 from '@/assets/images/404/404.png';
import img_404_cloud from '@/assets/images/404/404_cloud.png';

export default {
	data() {
		return {
			img_404,
			img_404_cloud,
			count: 5,
			timer: null,
		};
	},
	created() {
		this.initCount(() => {
			this.$router.replace('/');
		});
	},
	methods: {
		initCount(cb) {
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				this.count--;
				if (this.count <= 0) {
					clearInterval(this.timer);
					cb && cb();
				}
			}, 1000);
		},
	},
};
</script>

<style lang="scss" scoped>
.page404_container {
	width: 100%;
	height: 100%;
	background: #f0f2f5;
}
.wscn-http404 {
	width: 902px;
	margin-left: auto;
	margin-right: auto;
	padding: 150px 0;
	.img-404 {
		position: relative;
		float: left;
		width: 600px;
		overflow: hidden;
		&__parent {
			width: 100%;
		}
		&__child {
			position: absolute;
			animation-fill-mode: forwards;
			&.left-cloud {
				width: 80px;
				top: 17px;
				left: 220px;
				opacity: 0;
				animation: cloudLeft 2s linear 1s;
			}
			&.mid-cloud {
				width: 46px;
				top: 10px;
				left: 420px;
				opacity: 0;
				animation: cloudMid 2s linear 1.2s;
			}
			&.right-cloud {
				width: 62px;
				top: 100px;
				left: 500px;
				opacity: 0;
				animation: cloudRight 2s linear 1s;
			}
			@keyframes cloudLeft {
				0% {
					top: 17px;
					left: 220px;
					opacity: 0;
				}
				20% {
					top: 33px;
					left: 188px;
					opacity: 1;
				}
				80% {
					top: 81px;
					left: 92px;
					opacity: 1;
				}
				100% {
					top: 97px;
					left: 60px;
					opacity: 0;
				}
			}
			@keyframes cloudMid {
				0% {
					top: 10px;
					left: 420px;
					opacity: 0;
				}
				20% {
					top: 40px;
					left: 360px;
					opacity: 1;
				}
				70% {
					top: 130px;
					left: 180px;
					opacity: 1;
				}
				100% {
					top: 160px;
					left: 120px;
					opacity: 0;
				}
			}
			@keyframes cloudRight {
				0% {
					top: 100px;
					left: 500px;
					opacity: 0;
				}
				20% {
					top: 120px;
					left: 460px;
					opacity: 1;
				}
				80% {
					top: 180px;
					left: 340px;
					opacity: 1;
				}
				100% {
					top: 200px;
					left: 300px;
					opacity: 0;
				}
			}
		}
	}
	.bullshit {
		position: relative;
		float: left;
		width: 300px;
		padding-top: 25px;
		overflow: hidden;
		&__oops {
			margin-bottom: 20px;
			font-size: 32px;
			font-weight: bold;
			line-height: 40px;
			color: #1482f0;
		}
		&__headline {
			font-size: 20px;
			line-height: 24px;
			color: #1482f0;
			margin-bottom: 10px;
		}
		&__info {
			font-size: 14px;
			line-height: 20px;
			color: grey;
			margin-bottom: 30px;
		}
		&__return-home {
			display: block;
			width: 110px;
			height: 36px;
			line-height: 36px;
			background: #1482f0;
			border-radius: 100px;
			text-align: center;
			font-size: 14px;
			color: #ffffff;
			cursor: pointer;
		}
	}
}
</style>
